<template>
  <div class="category">
    <div class="category-list">
      <van-sidebar v-model="activeCategory" @change="changeHandler">
        <van-sidebar-item v-for="item, index in categoryList" :key="index"
                    :title="(item as unknown as string).trim()" />

      </van-sidebar>
    </div>
    <div class="category-brand">
      <van-grid :colum-num="2" square :gutter="10">
        <van-grid-item icon="photo-o"  v-for="item,index in brandList" :key="index" :text="(item as any).brand" />
        <!-- v-for="item,index in brandList" :key="index"  icon="photo-o" :text="(item as any).brand" -->
      </van-grid>
    </div>
  </div>
</template>

<script setup lang="ts">
import  type { Ref } from 'vue';
import { ref,reactive, onMounted,computed, watchEffect } from 'vue';
import { getCategoryListAPI,getBrandListAPI } from '@/api/product';
import { showFailToast } from 'vant';
let activeCategory = ref(0)
let categoryList = ref([])
let brandList = ref([])
let currCategory = computed(()=>{
  return categoryList.value ? categoryList.value[activeCategory.value] : ""
})

  const getCategoryList = async()=>{
    try{
      let result = await getCategoryListAPI()
      console.log("分类列表请求成功", result);
      categoryList.value = result.data
    }catch(err:any){
      showFailToast(err.message)
    }
  }
  const getBrandList = async()=>{
    try{
      let result = await getBrandListAPI({
        category:currCategory.value
      })
      console.log("分类下商品请求成功", result);
      brandList.value = result.data
    }catch(err:any){
      showFailToast(err.message)
    }
  }

  const changeHandler = async ()=>{ // 换分类的时候切换商品
    await getBrandList();
  }

  // watchEffect(async()=>{
  //   await getCategoryList()
  //   await getBrandList()
  // })
  onMounted(async ()=>{
    await getCategoryList()
    await getBrandList()
  })
  
</script>

<style scoped lang="scss">
.category {
    width: 100%;
    display: flex;
    .category-list {
        overflow-y: auto;
    }
    .category-brand {
        flex: 1;
        overflow-y: auto;
    }
}
</style>